<!DOCTYPE html>
<html>
  
<!-- Mirrored from www.dba.cn/book/electron/ELECTRONJiaoCheng/ELECTRONKuaiSuRuMen.html by HTTrack Website Copier/3.x [XR&CO'2014], Sun, 20 Mar 2022 10:23:56 GMT -->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Electron 快速入门 - Electron中文手册</title>
    <link rel="stylesheet" type="text/css" href="../../skins/cms/css/min-easyui.css">
    <link rel="stylesheet" type="text/css" href="../../skins/cms/css/book.css">
    <script type="text/javascript" src="../../js/jquery.min.js"></script>
    <script type="text/javascript" src="../../skins/cms/js/m-easyui.js"></script>
    <script type="text/javascript" src="../../skins/cms/js/prettify.js"></script>
  </head>
  <body class="easyui-layout" style="text-align:left">
    <div region="north" border="false" class="group wrap header" style="height:66px;font-size:100%">
      <div class="header">
        <div class="navigation-toggle" data-tools="navigation-toggle" data-target="#navbar-1">
          <span>Electron中文手册</span>
        </div>
        <div id="elogo" class="navbar navbar-left">
          <ul>
            <li>
              <h1><a href="../index.html">Electron中文手册</a></h1>
            </li>
          </ul>
        </div>
      <div style="clear:both"></div>
    </div>
   </div>
    <div region="west" split="true" data-options="collapsedSize:0,hideExpandTool:true" title="文档目录" style="width:20%;min-width:300px;padding:5px;display:none;">
        
      <ul class="easyui-tree"> 
        <li iconcls="icon-base"><span>Electron 教程</span><ul><li iconcls="icon-gears"><a href="ELECTRONJiaoChengJianJie.html">Electron 教程简介</a></li><li iconcls="icon-gears"><a  href="ELECTRONKuaiSuRuMen.html">Electron 快速入门</a></li><li iconcls="icon-gears"><a  href="ELECTRONZhuoMianHuanJingJiCheng.html">Electron 桌面环境集成</a></li><li iconcls="icon-gears"><a  href="ELECTRONZaiXianLiXianShiJianTanCe.html">Electron 在线/离线事件探测</a></li><li iconcls="icon-gears"><a  href="ELECTRONJinCheng.html">Electron 进程</a></li><li iconcls="icon-gears"><a  href="ELECTRONZhiChiDeCHROMEMingLingXingKaiGuan.html">Electron 支持的 Chrome 命令行开关</a></li><li iconcls="icon-gears"><a  href="ELECTRONHuanJingBianLiang.html">Electron 环境变量</a></li><li iconcls="icon-gears"><a  href="ELECTRONZhiChiDePingTai.html">Electron 支持的平台</a></li><li iconcls="icon-gears"><a  href="ELECTRONYingYongBuShu.html">Electron 应用部署</a></li><li iconcls="icon-gears"><a  href="ELECTRONXiangMACAPPSTOREYingYongTiJiaoXiangDao.html">Electron 向Mac App Store 应用提交向导</a></li><li iconcls="icon-gears"><a  href="ELECTRONYingYongDaBao.html">Electron 应用打包</a></li><li iconcls="icon-gears"><a  href="ELECTRONShiYongYuanShengMoKuai.html">Electron 使用原生模块</a></li><li iconcls="icon-gears"><a  href="ELECTRONZhuJinChengDiaoShi.html">Electron 主进程调试</a></li><li iconcls="icon-gears"><a  href="ELECTRONShiYongSELENIUMHeWEBDRIVER.html">Electron 使用 Selenium 和 WebDriver</a></li><li iconcls="icon-gears"><a  href="ELECTRONDEVTOOLSKuoZhan.html">Electron DevTools扩展</a></li><li iconcls="icon-gears"><a  href="ELECTRONShiYongPEPPERFLASHChaJian.html">Electron 使用 Pepper Flash 插件</a></li><li iconcls="icon-gears"><a  href="ELECTRONShiYongWIDEVINECDMChaJian.html">Electron 使用 Widevine CDM 插件</a></li><li iconcls="icon-gears"><a  href="ELECTRONShuYuBiao.html">Electron 术语表</a></li><li iconcls="icon-gears"><a  href="ELECTRONLiPingRan.html">Electron 离屏渲染</a></li><li iconcls="icon-gears"><a  href="ELECTRONJiaoHuShiJieShiQiREPL.html">Electron 交互式解释器 (REPL)</a></li></ul></li><li iconcls="icon-base"><span>Electron API</span><ul><li iconcls="icon-gears"><a  href="../ELECTRONAPI/ELECTRONDOMFILEDuiXiang.html">Electron DOM File对象</a></li><li iconcls="icon-gears"><a  href="../ELECTRONAPI/ELECTRONDOMWEBVIEWBiaoQian.html">Electron DOM <webview> 标签</a></li><li iconcls="icon-gears"><a  href="../ELECTRONAPI/ELECTRONWINDOWOPENHanShu.html">Electron window.open 函数</a></li></ul></li><li iconcls="icon-base"><span>在主进程内可用的模块</span><ul><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONAPPMoKuai.html">Electron app 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONAUTOUPDATERMoKuai.html">Electron autoUpdater 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONBROWSERWINDOWMoKuai.html">Electron BrowserWindow 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONCONTENTTRACINGMoKuai.html">Electron contentTracing 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONDIALOGMoKuai.html">Electron dialog 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONGLOBAL-SHORTCUTMoKuai.html">Electron global-shortcut 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONIPCMAINMoKuai.html">Electron ipcMain 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONMENUMoKuai.html">Electron menu 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONMENUITEMMoKuai.html">Electron MenuItem 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONPOWERMONITORMoKuai.html">Electron powerMonitor 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONPOWERSAVEBLOCKERMoKuai.html">Electron powerSaveBlocker 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONPROTOCOLMoKuai.html">Electron protocol 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONSESSIONMoKuai.html">Electron session 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONWEBCONTENTSMoKuai.html">Electron webContents 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONTRAYMoKuai.html">Electron Tray 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiZhuJinChengNeiKeYongDeMoKuai/ELECTRONLOCALES.html">Electron Locales</a></li></ul></li><li iconcls="icon-base"><span>在渲染进程（网页）内可用的模块</span><ul><li iconcls="icon-gears"><a  href="../ZaiRanJinChengWangYeNeiKeYongDeMoKuai/ELECTRONDESKTOPCAPTURERMoKuai.html">Electron desktopCapturer 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiRanJinChengWangYeNeiKeYongDeMoKuai/ELECTRONIPCRENDERERMoKuai.html">Electron ipcRenderer 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiRanJinChengWangYeNeiKeYongDeMoKuai/ELECTRONREMOTEMoKuai.html">Electron remote 模块</a></li><li iconcls="icon-gears"><a  href="../ZaiRanJinChengWangYeNeiKeYongDeMoKuai/ELECTRONWEBFRAMEMoKuai.html">Electron webFrame 模块</a></li></ul></li><li iconcls="icon-base"><span>两种进程都可用的模块</span><ul><li iconcls="icon-gears"><a  href="../LiangZhongJinChengDuKeYongDeMoKuai/ELECTRONCLIPBOARDMoKuai.html">Electron clipboard 模块</a></li><li iconcls="icon-gears"><a  href="../LiangZhongJinChengDuKeYongDeMoKuai/ELECTRONCRASHREPORTERMoKuai.html">Electron crashReporter 模块</a></li><li iconcls="icon-gears"><a  href="../LiangZhongJinChengDuKeYongDeMoKuai/ELECTRONNATIVEIMAGEMoKuai.html">Electron nativeImage 模块</a></li><li iconcls="icon-gears"><a  href="../LiangZhongJinChengDuKeYongDeMoKuai/ELECTRONSCREENMoKuai.html">Electron screen 模块</a></li><li iconcls="icon-gears"><a  href="../LiangZhongJinChengDuKeYongDeMoKuai/ELECTRONSHELLMoKuai.html">Electron shell 模块</a></li></ul></li><li iconcls="icon-base"><span>Electron 开发</span><ul><li iconcls="icon-gears"><a  href="../ELECTRONKaiFa/ELECTRONBianMaGuiFan.html">Electron 编码规范</a></li><li iconcls="icon-gears"><a  href="../ELECTRONKaiFa/ELECTRONYuanMaMuLuJieGou.html">Electron 源码目录结构</a></li><li iconcls="icon-gears"><a  href="../ELECTRONKaiFa/ELECTRONHeNWJSYuanMingNODE-WEBKITZaiJiShuShangDeChaYi.html">Electron 和 NW.js (原名 node-webkit) 在技术上的差异</a></li><li iconcls="icon-gears"><a  href="../ELECTRONKaiFa/ELECTRONGouJianXiTongGaiLan.html">Electron 构建系统概览</a></li><li iconcls="icon-gears"><a  href="../ELECTRONKaiFa/ELECTRONGouJianBuZhouOSX.html">Electron 构建步骤 (OS X)</a></li><li iconcls="icon-gears"><a  href="../ELECTRONKaiFa/ELECTRONGouJianBuZhouWINDOWS.html">Electron 构建步骤 (Windows)</a></li><li iconcls="icon-gears"><a  href="../ELECTRONKaiFa/ELECTRONGouJianBuZhouLINUX.html">Electron 构建步骤 (Linux)</a></li><li iconcls="icon-gears"><a  href="../ELECTRONKaiFa/ELECTRONZaiDiaoShiZhongShiYongSYMBOLSERVER.html">Electron 在调试中使用 Symbol Server</a></li><li iconcls="icon-gears"><a  href="../ELECTRONKaiFa/ELECTRONChangJianWenTi.html">Electron 常见问题</a></li><li iconcls="icon-gears"><a  href="../ELECTRONKaiFa/ELECTRONBanBenGuanLi.html">Electron 版本管理</a></li><li iconcls="icon-gears"><a  href="../ELECTRONKaiFa/ELECTRONWINDOWTiJiaoZhiNan.html">electron window 提交指南</a></li><li iconcls="icon-gears"><a  href="../ELECTRONKaiFa/ZiDongHuaChiXuJiChengXiTongCICeShi.html">自动化持续集成系统（CI）测试</a></li><li iconcls="icon-gears"><a  href="../ELECTRONKaiFa/ELECTRONWenDangFengGeZhiNan.html">Electron 文档风格指南</a></li></ul></li>
      </ul>
    
    </div>
    <div region="center">
      <div id="tt" class="easyui-tabs" fit="true" border="false" plain="true">
        <div title="Electron 快速入门 - Electron中文手册">  
            <div class="book-content">
              
      <div style="padding:8px;"> &gt; <a href="../index.html">Electron中文手册</a> &gt; Electron 快速入门</div>
      <div class="content"><h1 id="快速入门">快速入门</h1>
<h2 id="简介">简介</h2>
<p class="comments-section">Electron 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用。你可以把它看作是专注于桌面应用而不是 web 服务器的，io.js 的一个变体。</p>
<p class="comments-section">这不意味着 Electron 是绑定了 GUI 库的 JavaScript。相反，Electron 使用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chr<a href="../../omi/index.html">omi</a>um 浏览器。</p>
<h2 id="主进程">主进程</h2>
<p class="comments-section">在 Electron 里，运行 <code>package.<a href="../../json/index.html">json</a></code> 里 <code>main</code> 脚本的进程被称为<strong>主进程</strong>。在主进程运行的脚本可以以创建 web 页面的形式展示 GUI。</p>
<h2 id="渲染进程">渲染进程</h2>
<p class="comments-section">由于 Electron 使用 Chromium 来展示页面，所以 Chromium 的多进程结构也被充分利用。每个 Electron 的页面都在运行着自己的进程，这样的进程我们称之为<strong>渲染进程</strong>。</p>
<p class="comments-section">在一般浏览器中，网页通常会在沙盒环境下运行，并且不允许访问原生资源。然而，Electron 用户拥有在网页中调用 io.js 的 APIs 的能力，可以与底层操作系统直接交互。</p>
<h2 id="主进程与渲染进程的区别">主进程与渲染进程的区别</h2>
<p class="comments-section">主进程使用 BrowserWindow 实例创建网页。每个 BrowserWindow 实例都在自己的渲染进程里运行着一个网页。当一个 BrowserWindow 实例被销毁后，相应的渲染进程也会被终止。</p>
<p class="comments-section">主进程管理所有页面和与之对应的渲染进程。每个渲染进程都是相互独立的，并且只关心他们自己的网页。</p>
<p class="comments-section">由于在网页里管理原生 GUI 资源是非常危险而且容易造成资源泄露，所以在网页面调用 GUI 相关的 APIs 是不被允许的。如果你想在网页里使用 GUI 操作，其对应的渲染进程必须与主进程进行通讯，请求主进程进行相关的 GUI 操作。</p>
<p class="comments-section">在 Electron，我们提供用于在主进程与渲染进程之间通讯的 ipc 模块。并且也有一个远程进程调用风格的通讯模块 <a href="REMOTE.html">remote</a>。</p>
<h1 id="打造你第一个-electron-应用">打造你第一个 Electron 应用</h1>
<p class="comments-section">大体上，一个 Electron 应用的目录结构如下：</p>
<pre><code>your-app/
├── package.json
├── main.js
└── index.html
</code></pre>
<p class="comments-section"><code>package.json</code>的格式和 Node 的完全一致，并且那个被 <code>main</code> 字段声明的脚本文件是你的应用的启动脚本，它运行在主进程上。你应用里的 <code>package.json</code> 看起来应该像：</p>
<pre><code class="lang-json">{
  <span class="hljs-string">"name"</span>    : <span class="hljs-string">"your-app"</span>,
  <span class="hljs-string">"version"</span> : <span class="hljs-string">"0.1.0"</span>,
  <span class="hljs-string">"main"</span>    : <span class="hljs-string">"main.js"</span>
}
</code></pre>
<p class="comments-section"><strong>注意</strong>：如果 <code>main</code> 字段没有在 <code>package.json</code> 声明，Electron会优先加载 <code>index.js</code>。</p>
<p class="comments-section"><code>main.js</code> 应该用于创建窗口和处理系统时间，一个典型的例子如下：</p>
<pre><code class="lang-javascript"><span class="hljs-keyword">var</span> app = <span class="hljs-built_in">require</span>(<span class="hljs-string">'app'</span>);  <span class="hljs-comment">// 控制应用生命周期的模块。</span>
<span class="hljs-keyword">var</span> BrowserWindow = <span class="hljs-built_in">require</span>(<span class="hljs-string">'browser-window'</span>);  <span class="hljs-comment">// 创建原生浏览器窗口的模块</span>

<span class="hljs-comment">// 保持一个对于 window 对象的全局引用，不然，当 JavaScript 被 GC，</span>
<span class="hljs-comment">// window 会被自动地关闭</span>
<span class="hljs-keyword">var</span> mainWindow = <span class="hljs-literal">null</span>;

<span class="hljs-comment">// 当所有窗口被关闭了，退出。</span>
app.on(<span class="hljs-string">'window-all-closed'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
  <span class="hljs-comment">// 在 OS X 上，通常用户在明确地按下 Cmd + Q 之前</span>
  <span class="hljs-comment">// 应用会保持活动状态</span>
  <span class="hljs-keyword">if</span> (process.platform != <span class="hljs-string">'darwin'</span>) {
    app.quit();
  }
});

<span class="hljs-comment">// 当 Electron 完成了初始化并且准备创建浏览器窗口的时候</span>
<span class="hljs-comment">// 这个方法就被调用</span>
app.on(<span class="hljs-string">'ready'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
  <span class="hljs-comment">// 创建浏览器窗口。</span>
  mainWindow = <span class="hljs-keyword">new</span> BrowserWindow({width: <span class="hljs-number">800</span>, height: <span class="hljs-number">600</span>});

  <span class="hljs-comment">// 加载应用的 index.html</span>
  mainWindow.loadURL(<span class="hljs-string">'file://'</span> + __dirname + <span class="hljs-string">'/index.html'</span>);

  <span class="hljs-comment">// 打开开发工具</span>
  mainWindow.openDevTools();

  <span class="hljs-comment">// 当 window 被关闭，这个事件会被发出</span>
  mainWindow.on(<span class="hljs-string">'closed'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-comment">// 取消引用 window 对象，如果你的应用支持多窗口的话，</span>
    <span class="hljs-comment">// 通常会把多个 window 对象存放在一个数组里面，</span>
    <span class="hljs-comment">// 但这次不是。</span>
    mainWindow = <span class="hljs-literal">null</span>;
  });
});
</code></pre>
<p class="comments-section">最后，你想展示的 <code>index.html</code> ：</p>
<pre><code class="lang-html"><span class="hljs-doctype">&lt;!DOCTYPE html&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">html</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">head</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">title</span>&gt;</span>Hello World!<span class="hljs-tag">&lt;/<span class="hljs-title">title</span>&gt;</span>
  <span class="hljs-tag">&lt;/<span class="hljs-title">head</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-title">body</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-title">h1</span>&gt;</span>Hello World!<span class="hljs-tag">&lt;/<span class="hljs-title">h1</span>&gt;</span>
    We are using io.js <span class="hljs-tag">&lt;<span class="hljs-title">script</span>&gt;</span><span class="javascript"><span class="hljs-built_in">document</span>.write(process.version)</span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>
    and Electron <span class="hljs-tag">&lt;<span class="hljs-title">script</span>&gt;</span><span class="javascript"><span class="hljs-built_in">document</span>.write(process.versions[<span class="hljs-string">'electron'</span>])</span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>.
  <span class="hljs-tag">&lt;/<span class="hljs-title">body</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">html</span>&gt;</span>
</code></pre>
<h1 id="运行你的应用">运行你的应用</h1>
<p class="comments-section">一旦你创建了最初的 <code>main.js</code>， <code>index.html</code> 和 <code>package.json</code> 这几个文件，你可能会想尝试在本地运行并测试，看看是不是和期望的那样正常运行。</p>
<h2 id="electronprebuild">electron-prebuild</h2>
<p class="comments-section">如果你已经用 <code>npm</code> 全局安装了 <code>electron-prebuilt</code>，你只需要按照如下方式直接运行你的应用：</p>
<pre><code class="lang-bash">electron .
</code></pre>
<p class="comments-section">如果你是局部安装，那运行：</p>
<pre><code class="lang-bash">./node_modules/.bin/electron .
</code></pre>
<h2 id="手工下载-electron-二进制文件">手工下载 Electron 二进制文件</h2>
<p class="comments-section">如果你手工下载了 Electron 的二进制文件，你也可以直接使用其中的二进制文件直接运行你的应用。</p>
<h3 id="windows">Windows</h3>
<pre><code class="lang-bash">$ .\electron\electron.exe your-app\
</code></pre>
<h3 id="linux">Linux</h3>
<pre><code class="lang-bash">$ ./electron/electron your-app/
</code></pre>
<h3 id="os-x">OS X</h3>
<pre><code class="lang-bash">$ ./Electron.app/Contents/MacOS/Electron your-app/
</code></pre>
<p class="comments-section"><code>Electron.app</code> 里面是 Electron 发布包，你可以在这里下载到。</p>
<h1 id="以发行版本运行">以发行版本运行</h1>在你完成了你的应用后，你可以按照<a href="YingYongBuShu.html">应用部署</a>指导发布一个版本，并且以已经打包好的形式运行应用。 <br></div>
      <div class="prev-next" style="padding:8px;">上一篇：<a class="prev" href="ELECTRONJiaoChengJianJie.html">Electron 教程简介</a><br>下一篇：<a class="prev" href="ELECTRONZhuoMianHuanJingJiCheng.html">Electron 桌面环境集成</a><br></div>
    
            </div>
        </div> 
      </div>
    </div>
  </body>

<!-- Mirrored from www.dba.cn/book/electron/ELECTRONJiaoCheng/ELECTRONKuaiSuRuMen.html by HTTrack Website Copier/3.x [XR&CO'2014], Sun, 20 Mar 2022 10:23:56 GMT -->
</html>